<style>
  .wrapper {
    padding-left: 5em;
  }

  h2 {
    margin-top: 3em;
    margin-left: -1em;
  }

  .flex {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }

  .item {
    background-color: #ccc;
    width: 50px;
    height: 70px;
    line-height: 70px;
    font-weight: bold;
    text-align: center;
  }

  .spAdd+.item,
  .spBo~.item {
    background-color: aqua;
  }

  /* ------------------------------------------------------------- */
  .isc--1.isc--2 span {
    color: red;
  }

  :is(#_is1, .isc--1) span {
    color: lightgreen;
  }

  .whc--1.whc--2 span {
    color: red;
  }

  :where(#_wh1, .whc--1) span {
    color: lightgreen;
    text-decoration: underline;
  }
</style>
<div class="wrapper">
  <h2>样式测试：</h2>
  <h3>+ ~ 选择器：</h3>
  <div class="flex">
    <div class="item"></div>
    <div class="item spBo">~</div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="flex">
    <div class="item"></div>
    <div class="item spAdd">+</div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <code style="background-color: #eee">||</code>选择器没有浏览器支持

  <h3>:is() 和 :where() 选择器</h3>
  <p style="color:chocolate;">红色的文字 颜色能否被覆盖呢？</p>
  <div id="_is1" class="isc--1 isc--2">测试 <span>:is()</span> 选择器，被覆盖理所当然，因为id选择器</div>
  <div class="isc--1 isc--2">测试 <span>:is()</span> 选择器，也被覆盖说明 :is的权重是里面选择器最大的那个！</div>
  <div id="_wh1" class="whc--1 whc--2">测试 <span>:where()</span> 选择器，未被覆盖，因为不计算权重</div>
  <div class="whc--1 whc--2">测试 <span>:where()</span> 选择器，未被覆盖，因为不计算权重</div>

  <h2>Interval:</h2>
  <p><button onclick="startTest(event)">开始</button> 查看console！</p>
  <p class="tips">结论：</p>
  <p class="tips">不断修改系统时间，setInterval执行节奏依然不变，显然原理不是取Date.now()</p>
  <p class="tips">setInterval 1000
    并不能保证每次回调的间隔大于等于1000.（大于很好理解，要等待微任务和同步任务执行完），也有可能小于1000。也许interval会准确的每1000ms创建一个宏任务，但上次任务的执行可能推迟了，
    所以导致本次的执行间隔小于1000
  </p>
  <p class="tips">setInterval 回调执行时间过长，并不会导致后续的interval回调积压。（上例中，每秒执行一次，但第6次的回调阻塞的5.5s，阻塞结束后，不会一瞬间调用4次），显然内部不是傻傻的计时触发
    加入队列，而是心跳执行的方案。每次心跳，先判断上次是否结束，结束了触发执行（加入队列的方式），否则直接忽略。</p>

</div>

<script>
  let timer = 0;
  const maxCount = 15; // Number.MAX_SAFE_INTEGER;
  function startTest(e) {
    e.target.innerText = '结束';
    e.target.onclick = stopTest;
    let c = 0;
    let start = Date.now();

    timer = setInterval(() => {
      const end = Date.now();
      console.log(`${c + 1}:${end - start}`); // 不动系统时间，时间差可能小于tick
      start = end;
      c++;
      if (c === 5) {
        // 第6次让回调执行时间过长
        while (Date.now() - start < 5500);
      }
      if (c >= maxCount) {
        stopTest(e);
      }
    }, 1000);
  }
  function stopTest(e) {
    clearInterval(timer);
    e.target.innerText = '开始';
    e.target.onclick = startTest;
  }

</script>